<template>
  <div class="container-wrap clearfix">
    <div class="container">
      <header class="header clearfix">
        <Header :title="title" @search="handleSearch" @clear="handleClear" />
      </header>

      <main class="main">
        <div
          v-for="(iten, index) in featureList"
          :class="iten.isSearch ? 'isSearch' : ''"
          class="feature-item"
          :key="index"
        >
          <FeatureBlock :featureDate="iten" @itemClick="handleFeatureClick" />
        </div>
      </main>

      <footer class="footer">
        <Footer />
      </footer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { featureConfig } from "@/config/const";
import useHistory from "@/store/useHistory";
import type { CompKey } from "@/config/components";
import { invoke } from "@tauri-apps/api/tauri";

const featureList = ref(featureConfig);
const title = ref("Home");
const router = useRouter();
const histroyStore = useHistory();

const startApp = () => {
  console.log("test");
  invoke("open_exe", { fileSrc: "C:/Users/33153/Desktop/oCam.exe" }).then(res => {
    console.log("res: ", res);
  }).catch(err => {
    console.log("err: ", err);
  });

  invoke("open_exe", { fileSrc: "C:/Users/33153/Desktop/Xftp" }).then(res => {
    console.log("res: ", res);
  }).catch(err => {
    console.log("err: ", err);
  });
}

const handleSearch = (val: string) => {
  if (!val.trim()) return;

  const searchList = featureList.value
    .filter(e => !e.isSearch)
    .flatMap(e => e.children)
    .filter(e => e.label.toLowerCase().indexOf(val.toLowerCase()) !== -1);

  if (searchList.length === 0) return;

  const searchFeature = featureList.value.find(e => e.isSearch);

  if (searchFeature) {
    searchFeature.children = searchList;
  } else {
    featureList.value.unshift({
      title: "搜索结果",
      titleIcon: "icon-fangdajing",
      isSearch: true, // 搜索标识
      children: searchList
    });
  }
};

const handleClear = () => {
  const filterData = featureConfig.filter(e => !e.isSearch);
  featureList.value = filterData;
};

const handleFeatureClick = (item: FeatureMenuType, index: number, featureList: FeatureDateType<CompKey>) => {
  if (import.meta.env.MODE === "development") {
    console.log("item: ", item);
  }

  // 添加访问记录
  histroyStore.add(item);

  router.push({
    path: "/featurePage",
    query: {
      ...item,
      titleIcon: featureList.titleIcon
    }
  });
};
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.container-wrap {
  width: calc(100vw - 30%);
  height: 100vh;
  margin: 0 auto;
  background: $white;
  .container {
    margin: 30px auto;
    .header {
      .header-title {
        color: $primary;
      }
      .header-search {
        margin-top: 10px;
      }
    }
    .main {
      .feature-item {
        margin: 50px 0;
      }
      .isSearch {
        background: #f5f4f4;
        border-radius: 4px;
      }
    }
    .footer {
      margin-top: -24px;
    }
  }
}
</style>
